<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-circle-plus-outline" circle></el-button>
        <el-dialog title="公司员工信息卡"
                   :visible.sync="dialogFormVisible"
                   width="42%"
                   center
                   append-to-body>
            <el-transfer
                    filterable
                    center
                    target-order="push"
                    :titles="['Source', 'Target']"
                    :filter-method="filterMethod"
                    filter-placeholder="请输入名字首字母"
                    v-model="value"
                    :props="{
                      key:'u_id',
                      label:'u_name'
                    }"
                    :data="data">
                <span slot-scope="{ option }">{{ option.u_id }}-{{ option.u_name }}</span>
            </el-transfer>
            <div slot="footer" class="dialog-footer" >
                <el-button @click="quxiao">取 消</el-button>
                <el-button type="primary" @click="queding">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import {mapActions,mapState} from 'vuex'
    export default {
        name:'Transfer',
        data() {
            return {
                dialogFormVisible: false,
                // data:[],
                value: [],
                selectPerson:[],
                filterMethod(query, item) {
                    return item.pinyin.indexOf(query) > -1;
                }
            };
        } ,
        watch:{
        } ,
        methods:{
            ...mapActions(['getAllStaff']),
            quxiao(){
                this.dialogFormVisible=false
                this.selectPerson=[]
            } ,
            queding(){
                this.selectPerson=[]
                for(let i=0;i<this.data.length;i++){
                    for(let j=0;j<this.value.length;j++){
                        if(this.data[i].u_id===this.value[j]){
                            // console.log(this.data[i].u_name)
                            this.selectPerson.push(this.data[i].u_name)
                        }
                    }
                }
                // console.log(selectPerson)
                // console.log(this.data[this.value].label)
                // let selectPerson=this.data[this.value].label
                this.$emit('selectPerson',this.selectPerson)
                this.dialogFormVisible=false
            }
        } ,
        computed:{
            data(){
                return this.$store.state.yygl.AllStaff
            }
            // ...mapState({
            //     personMes:function (state) {
            //         return state.USERStore.personMessage
            //     }
            // }),
        },
        created() {
            this.getAllStaff()
        }
    };
</script>

<style lang="less" scoped>
    .el-transfer{
        margin: auto;
    }
</style>